<template>
	<view class="order" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="new-search-wrap">
			<view class="new-search">
				<image src="https://img.tennoir.ltd/static/new/%E6%90%9C%E7%B4%A2.png" style="width: 36rpx;height: 36rpx" />
				<input type="text" v-model="account" :adjust-position="false" placeholder="账号" />
			</view>
			<image src="https://img.tennoir.ltd/static/new/%E7%AD%9B%E9%80%89.png" style="width: 32rpx;height: 32rpx" />
		</view>
		<view class="tab flex tc tb p-tb-25 bc-w">
			<view v-for="(item, index) in judgeTab? orderStatus.slice(6, 8) : orderStatus.slice(0, 5)"
				:class="'col-'+ (judgeTab? orderStatus.slice(6, 8).length : orderStatus.slice(0, 5).length)"
				@tap="setTab(index)">
				<!-- <view :style="orderStatusIndex == index? css.tcmc : css.tcm"> -->
				<view :class="orderStatusIndex == index? 'new-tcmc' : css.tcm">
					{{ item.name }}
					<!-- <view class="line" :style="orderStatusIndex == index? css.mcbg : 'bc-w'"></view> -->
					<view class="line" :class="orderStatusIndex == index? 'new-mcbg' : 'new-bc-w'"></view>
				</view>
			</view>
		</view>
		<block v-if="!isLoading">
			<view class="new-baoliu">
				共
				<text class="new-baoliuday">{{ orderList.length }}</text>
				条记录 注意:已取消的订单只保留7天
			</view>
			<!-- <view class="order-list p-tb-30"> -->
			<view class="order-list p-tb-20" v-if="!isEmpty">
				<view class="item br-10 m-lr-30 m-b-30 p-30 p-t bc-w new-listitem" v-for="item in orderList" :key="item.id"
					@tap="$xyfun.to('/pages/user/order/detailAdmin?id='+item.id+'&type=order')">
					<view class="new-card-wrap">
						<view class="new-card-title-wrap">
							<text>
                                预约日期：{{ item.date }}
							</text>
							<text class="new-card-title-tip">{{item.status_text}}</text>
						</view>
						<view class="new-card-contant">
							<text>预约订单</text>
							<text>赛道</text>
							<test class="new-card-contant-time">{{item.item[0].starttime+'~'+item.item[0].endtime}}</test>
						</view>
						<view class="new-card-shifu">实付金额：￥{{ item.pay_fee }}</view>
						<view class="new-card-bottom">
							<text class="new-card-bottom-btn" v-if="item.status === 0">立即支付</text>
                            <text class="new-card-bottom-btn-xq" v-else>订单详情</text>
							<text class="new-card-bottom-time" v-if="item.status === 0">剩余时间{{ formatRemainingTime(item.ext_arr.expired_time) }}</text>
						</view>
						<!-- <view class="new-card-bottom">
							<text class="new-card-bottom-btn-xq">订单详情</text>
						</view> -->
					</view>
					<!-- <view class="flex">
						<view>订单号：{{item.order_sn}}</view>
						<view class="m-l-auto tb" :style="css.tcmc">{{item.status_text}}</view>
					</view>

					<view class="item-list flex m-t-30">
						<view v-for="(g,index) in item.item" :key="index" :style="css.blpc"
							:class="'item p-tb-30 flex '+(index == item.item.length-1?'':'bl-b')">
							<view class="l ovh br-10">
								<image :src="item.storelogo" mode="widthFix" />
							</view>
							<view class="r psr m-l-20">
								<view class="tb lh-40 goods-title">
									{{item.storename}}
								</view>
								<view class="venue m-t-10 flex">
									<view>{{item.venuename}} - {{g.area}}</view>
								</view>
								<view class="date m-t-20 ts-26" :style="css.tcl">
									{{g.date}} {{g.week}} {{g.starttime}}-{{g.endtime}}
								</view>
								<view class="price-box flex psa lh-32">
									<text :style="css.tcp">￥</text>
									<text :style="css.tcp" class="ts-32 tb">{{ g.price }}</text>
								</view>
							</view>
						</view>
					</view>

					<view :style="css.pbg" class="flex p-20 m-t-30">
						<view>合计：¥{{item.total_amount}}</view>
						<view class="m-l-auto lh-30 flex" :style="css.tcmc">订单详情 <text class="xyicon icon-right"></text>
						</view>
					</view> -->
				</view>
			</view>
			<view v-else>
				<xy-empty :text="'暂无'+(orderStatusIndex>0?orderStatus[orderStatusIndex].name:'')+'订单'" />
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import xyEmpty from '@/components/xy-empty';
	export default {
		components: {
			xyEmpty,
		},
		data() {
			return {
				css: {},
				isLoading: true,
				isEmpty: true,
				orderList: [],
				currentPage: 1,
				lastPage: 1,
				loadStatus: 'loadmore',
				orderStatus: [{
						value: 'all',
						name: '全部'
					},
					{
						value: '0',
						name: '待付款'
					},
					{
						value: '1',
						name: '已付款'
					},
					{
						value: '-1',
						name: '已取消'
					},
					{
						value: '-2',
						name: '已关闭'
					},
					{
						value: '-3',
						name: '已退订'
					},
					{
						value: '3',
						name: "使用中订单"
					},
					{
						value: '4',
						name: "超时订单"
					}
				],
				orderStatusIndex: 0,
				// 判断tab栏
				judgeTab: false
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(options) {
			// 判断页面参数是否为使用中订单或者超时订单
			if (options.pageOrderId) {
				this.judgeTab = true
				if (options.pageOrderId == 3 || options.pageOrderId == 4) {
					options.status = options.pageOrderId;
					this.orderStatusIndex = options.pageOrderId - 3
					this.$api.post({
						url: '/order/lists',
						loadingTip: '加载中...',
						data: {
							page: this.currentPage,
							status: options.pageOrderId
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.orderList = [...this.orderList, ...res.data];
							this.isEmpty = !this.orderList.length;
							this.currentPage = res.current_page;
							this.lastPage = res.last_page;
							this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
						}
					});
				}
			} else {
				// 先检查 options.status 是否在 orderStatus 数组中存在
				const status = options.status;

				// 找到 status 对应的 index
				const statusIndex = this.orderStatus.findIndex(item => item.value === status);

				// 如果找到了匹配的 statusIndex，否则使用默认值 0（即 "全部"）
				if (statusIndex !== -1) {
					this.orderStatusIndex = statusIndex;
				} else {
					this.orderStatusIndex = 0; // 默认选择 "全部"
				}
				this.loadData();
			}
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.orderList = [];
			this.loadData();
		},
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.loadData();
			}
		},
		methods: {
			loadData() {
				this.$api.post({
					url: '/order/lists',
					loadingTip: '加载中...',
					data: {
						page: this.currentPage,
						status: this.orderStatus[this.orderStatusIndex]['value'],
						admin:1
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.orderList = [...this.orderList, ...res.data];
						this.isEmpty = !this.orderList.length;
						this.currentPage = res.current_page;
						this.lastPage = res.last_page;
						this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			setTab(index) {
				if (this.judgeTab) {
					this.$api.post({
						url: '/order/lists',
						loadingTip: '加载中...',
						data: {
							page: this.currentPage,
							status: index + 3,
							admin:1
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.orderList = [...this.orderList, ...res.data];
							this.isEmpty = !this.orderList.length;
							this.currentPage = res.current_page;
							this.lastPage = res.last_page;
							this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
						}
					});
					this.orderStatusIndex = index;
					this.currentPage = 1;
					this.orderList = [];
				} else {
					this.orderStatusIndex = index;
					this.currentPage = 1;
					this.orderList = [];
					this.loadData();
				}
			},
			// 将时间戳转换为天时分格式
			formatRemainingTime(expiredTime) {
				// 将到期时间戳转换为毫秒
				const expiredTimestamp = parseInt(expiredTime) * 1000;

				// 获取当前时间戳（毫秒）
				const currentTimestamp = new Date().getTime();

				// 计算剩余时间（秒）
				let remainingSeconds = Math.floor((expiredTimestamp - currentTimestamp) / 1000);

				// 如果剩余时间小于或等于0，返回0分
				if (isNaN(remainingSeconds) || remainingSeconds <= 0) {
					return "0分";
				}

				// 计算天、时、分
				const days = Math.floor(remainingSeconds / (24 * 60 * 60));
				const hours = Math.floor((remainingSeconds % (24 * 60 * 60)) / (60 * 60));
				const minutes = Math.floor((remainingSeconds % (60 * 60)) / 60);

				let result = "";
				if (days > 0) {
					result += days + "天 ";
				}
				if (hours > 0 || days > 0) {
					result += hours + "时 ";
				}
				result += minutes + "分";

				return result;
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab {
		width: 100%;

		.line {
			height: 4rpx;
			width: 60rpx;
			margin: 10rpx auto 0;
		}
	}

	.new-listitem {
		border-radius: 20rpx;
	}

	.new-card-wrap {
		.new-card-title-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;

			.new-card-title-tip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #FF5937;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.new-card-contant {
			display: flex;
			margin-top: 20rpx;
			text {
				display: inline-block;
				margin-right: 50rpx;
				width: 160rpx;
				height: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.new-card-contant-time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.new-card-shifu {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			line-height: 24rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
			margin-top: 20rpx;
		}
	}

	.new-card-bottom {
		border-top: 2rpx solid #F6F6F6;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		padding-top: 24rpx;

		.new-card-bottom-time {
			font-family: AppleSystemUIFont;
			font-size: 24rpx;
			color: #FF5533;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-right: 32rpx;
		}

		.new-card-bottom-btn {
			width: 140rpx;
			height: 52rpx;
			background: #FF5533;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
		}

		.new-card-bottom-btn-xq {
			width: 140rpx;
			height: 52rpx;
			background: #fff;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			border: 2rpx solid #CBCBCB;
			line-height: 34rpx;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
		}
	}

	.new-search-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 32rpx;
		margin-top: 12rpx;
	}

	.new-baoliu {
		margin-top: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
	}

	.new-baoliuday {
		color: #333333;
	}

	.new-tcmc {
		color: #FF5533;
	}

	.new-mcbg {
		background-color: #FF5937;
	}

	.new-search {
		display: flex;
		align-items: center;
		width: 620rpx;
		height: 68rpx;
		background: #F5F5F5;
		border-radius: 50rpx;

		image {
			margin-left: 24rpx;
			margin-right: 12rpx;
		}
	}

	.return {
		line-height: 40rpx;
		height: 40rpx;
	}

	.order-list {
		.goods {
			line-height: 150rpx;

			.image {
				width: 150rpx;
				height: 150rpx;
			}

			.image image {
				width: 150rpx;
			}
		}
	}

	.item-list {
		.item {
			.l {
				width: 150rpx;
				height: 150rpx;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.r {
				width: 460rpx;

				.price-box {
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}
</style>
